<template>
  <div>
    App.vue
    <!--以.vue结尾的文件 都称为组件-->
    <!--vue文件的结构 划分成三个部分-->
    <!--template 模板 与html元素 页面结构-->
    <!-- <div>------Demo01组件------</div>
    <Demo01 />
    <div>------Demo02组件条件渲染------</div>
    <Demo02 />
    <div>------Demo03组件列表渲染------</div>
    <Demo03 /> -->
    <div>------Demo04组件表单绑定------</div>
    <Demo04 />
    <div>------Demo05组件生命周期------</div>
    <Demo05 v-if="flag" />
    <button @click="flag = !flag">改变flag</button>
    <div>------Demo06组件库使用------</div>
    <Demo06  />
  </div>
</template>
<script setup>
// 引入demo1组件
// import Demo01 from './views/demo01.vue'
// import Demo02 from './views/demo02.vue'
// import Demo03 from './views/demo03.vue'
import Demo04 from './views/demo04.vue'
import Demo05 from './views/demo05.vue'
import Demo06 from './views/demo06.vue'

import {ref} from 'vue'
const flag = ref(true)

</script>
<style scoped>
/* div{
    color: red;
  } */
</style>